'use strict';

import React, {
	Component
} from 'react';
import {
	StyleSheet,
	View,
	Text,
	TabBarIOS
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import Shop from '../pages/Shop';
import My from '../pages/My';
import Category from '../pages/Category';
import Cart from '../pages/Cart';

const tabItems = [{
	title: '商城',
	icon: 'ios-home',
	selectedIcon: 'ios-home',
	component: Shop
}, {
	title: '分类',
	icon: 'ios-keypad',
	selectedIcon: 'ios-keypad',
	component: Category
}, {
	title: '购物车',
	icon: 'ios-cart',
	selectedIcon: 'ios-cart',
	component: Cart
}, {
	title: '我',
	icon: 'ios-contact',
	selectedIcon: 'ios-contact',
	component: My
}, ];

class TabsView extends Component {
	constructor(props) {
		super(props);
		this.state = {
			selectedTab: tabItems[0].title,
		}
	}

	render() {
		return (
			<TabBarIOS barTintColor='#f7f7f7' tintColor='#ff4f03'>
				{
                    tabItems.map((item, i) => {
                        let Component = item.component;
                        return (
                            <Icon.TabBarItem
                                key={i}
                                title={item.title}
                                iconName={item.icon}
                                selectedIconName={item.selectedIcon}
                                selected={this.state.selectedTab === item.title}
                                onPress={() => {
                                    this.setState({
                                       selectedTab: item.title
                                    })
                                }}
                            >
                                <Component navigator = {this.props.navigator} {...this.props}/>
                            </Icon.TabBarItem>
                        )
                    })
                }

            </TabBarIOS>
		)
	}
}

const styles = StyleSheet.create({

})

export default TabsView;